<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import dayjs from "dayjs";
import Left from '@/views/Left/index.vue'
import Center from '@/views/Center/index.vue'
import Right from '@/views/Right/index.vue'

/* 显示时间功能 start */
// 数据如果用户界面需要使用，需要定义成响应式数据
const nowTime = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
// 数据如果用户界面不需要使用，就定义成普通数据即可
let timer = null;

onMounted(() => {
  timer = setInterval(() => {
    nowTime.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
/* 显示时间功能 end */

/* 大屏适配 start */
const scale = ref(1);

onMounted(() => {
  resize();
  window.addEventListener('resize', resize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize);
});

const resize = () => {
  // 设计稿的宽高
  const draftWidth = 1366;
  const draftHeight = 617;
  // 整个屏幕的宽高
  const clientWidth = document.documentElement.clientWidth;
  const clientHeight = document.documentElement.clientHeight;

  // 当屏幕的比例（16 / 7）大于设计稿的比例（16 / 9）,说明屏幕更宽
  if (clientWidth / clientHeight > draftWidth / draftHeight) {
    scale.value = clientHeight / draftHeight;
    // 当屏幕的比例（16 / 7）小于设计稿的比例（16 / 9）,说明屏幕更窄
  } else if (clientWidth / clientHeight < draftWidth / draftHeight) {
    scale.value = clientWidth / draftWidth;
  } else {
    scale.value = 1;
  }
};
/* 大屏适配 end */

</script>

<template>
  <div class="dashboard" :style="{ transform: `scale(${scale})` }">
    <div class="header">
      <h1 class="title">数据大屏实时展示</h1>
      <span class="time">当前时间: {{ nowTime }}</span>
    </div>
    <div class="content">
      <div class="left">
        <Left/>
      </div>
      <div class="center">
        <Center/>
      </div>
      <div class="right">
        <Right />
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "App",
};
</script>

<style lang="scss" scoped>
  .dashboard {
    .header {
      height: 60px;
      background-image: url("./assets/head_bg.png");
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .title {
        color: #fff;
        font-size: 22px;
      }

      .time {
        position: absolute;
        top: 0px;
        right: 10px;
        height: 60px;
        line-height: 60px;
        color: $text-color;
        font-size: 12px;
      }
    }
    .content {
      height: calc(100% - 60px);
      display: flex;
      padding: 10px;
      .left,.right {
        width: 340px;
        height: 100%;
      }
      .center {
        width: 650px;
        height: 546px;
        margin: 0 10px;
      }
    }
  }
</style>
